<%@ page import="java.util.ArrayList" %>
<%@ page import="activity.entity.Activity" %>
<%@ page import="activity.dao.Actdao" %><%--
  Created by IntelliJ IDEA.
  User: awake
  Date: 2023/12/28
  Time: 10:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .bg1{
            background: #E3E3E3;
        }

        .bg2{
            background: #EEE8AA;
        }

        .bg3{
            color: white;
            background: red;
        }
        table{
            width: 100%;
            margin: 0 auto;
            /* 让表格和单元格的边框合并 */
            border-collapse: collapse;
        }
        td,th{
            text-align: center;
            height:50px;

        }
        h1{
            text-align: center;
            color:#B94844;margin-bottom: 1em;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script sr="js/bootstrap.min.js"></script>

</head>
<%
    ArrayList<Activity>activities=new Actdao().getActinfo();
    if (activities==null){
        activities=new ArrayList<>();
    }
%>
<body>
<div class="container">
    <div class="row">
        <h1>志愿项目</h1>
        <table id="cart-table" border="1">
            <tr>
                <th >志愿名称</th>
                <th >志愿时长</th>
                <th >地址</th>
                <th >联系人</th>
                <th >电话</th>
                <th>编号</th>
            </tr>
            <%
                for (Activity activity:activities){
            %>
            <tr>
                <td ><%=activity.getAname()%></td>
                <td ><%=activity.getAtime()%></td>
                <td ><%=activity.getAddress()%></td>
                <td ><%=activity.getContactman()%></td>
                <td ><%=activity.getCallnum()%></td>
                <td><%=activity.getActid()%></td>
            </tr>
            <%
                }
            %>
        </table>
    </div>
</div>

<a href="Adact.jsp"><input value="添加活动" type="submit"></a>
<a href="delAct.jsp"><input type="submit" value="删除活动"></a>
<a href="upact.jsp"><input value="修改活动" type="submit"></a>
<a href="selact.jsp"><input type="submit" value="查询活动"></a>
<a href="Oppage.jsp"><h1>返回</h1></a>
<script>
    //表格隔行变色
    var table=document.getElementById("cart-table");
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        if(i % 2 == 1){
            trs[i].className = "bg1";
            //自定义一个属性来暂时存储当前className的值
            trs[i].oldClassName = "bg1";
        }else{
            trs[i].className = "bg2";
            trs[i].oldClassName = "bg2";
        }
        //鼠标事件
        //onmouseover
        trs[i].onmouseover = function(){
            //当鼠标滑过，改变className之前，将原来的className暂时存储起来
            this.oldClassName = this.className;
            this.className = "bg3";
        }
        //鼠标离开事件onmouseout
        trs[i].onmouseout = function(){
            this.className = this.oldClassName;
        }
    }


</script>

</body>
</html>
